import echarts from 'echarts';
import config from './config'
// import axios from 'axios';

let Chart = {
  config: config,
  instances: {},
  current: {id: ''},
  // 基础绘图方法
  init: function (option, id) {
    let myChart = echarts.init(document.getElementById(id));
    myChart.setOption(option);
    return myChart;
  },
  // 通用基础绘图方法
  draw: function (option, name) {
    console.log(config);
    let id = config[name].id;
    let e = Chart.init(option, id);
    Chart.instances[name] = {
      'id': id,
      'instance': e,
      'option': option
    };
    return e;
  },
  update: function (id) {
    Chart.init(Chart.instances[id].option, id);
  },
  dataLoad: DataLoad,
  ajaxData: function (key, data, _callbackS, _callbackE) {
    let cbkf = ((Math.random() * 1000).toFixed(0) + 1000).toString();
    $.ajax({
      type: 'GET',
      url: key,
      data: data,
      dataType: 'jsonp',
      jsonpCallback: 'call1back' + cbkf + 'a',
      crossDomain: true,
      success: function (data) {
        if (_callbackS) _callbackS(data);
      },
      error: function (data) {
        if (_callbackE)_callbackE(data);
        alert('error');
      }
    });
    // 请求数据接口
    // ajaxData: function (url, data, _callbackS, _callbackE) {
    //   axios.get(url, data)
    //     .then(function (rst) {
    //       if (_callbackS)_callbackS(rst);
    //     })
    //     .catch(function (rst) {
    //       if (_callbackE) _callbackE(rst);
    //     });
    // }
  }
};

// 图形数据加载器
let DataLoader;
DataLoader = {
  'common': function (option, data) {
    let x = [];
    let y = data.map((d) => { x.push(d.name); return d.value; });
    let xAxis = $.isArray(option.xAxis) ? option.xAxis[0] : option.xAxis;
    let ser = $.isArray(option.series) ? option.series[0] : option.series;
    xAxis['data'] = x;
    ser['data'] = y;
  },
  'pie': function (option, data) {
    let ser = $.isArray(option.series) ? option.series[0] : option.series;
    ser['data'] = data;
  },
  'pieTwo': function (option, data) {
    let legend = $.isArray(option.legend) ? option.legend[0] : option.legend;
    let colorP = option.color;
    let parents = data.map(d => ({name: d.name, value: d.value.reduce((a, b) => (a + b.value), 0)}));
    let children = data.reduce((a, b, i) => a.concat(b.value.map(e => {
      e['itemStyle'] = {color: colorP[i]};
      return e;
    })), []);
    legend['data'] = parents.map(d => d.name);
    option.series[0]['data'] = parents;
    option.series[1]['data'] = children;
  },
  'graph2': function (option, graph) {
    let legend = $.isArray(option.legend) ? option.legend[0] : option.legend;
    let groups = graph.nodes.reduce((a, b) => {
      if (!(b.category in a)) a[b.category] = 1;
      return a;
    }, {});
    let categories = graph['categories'] || Object.keys(groups).map((d) => ({'name': '类' + d}));
    let ser = $.isArray(option.series) ? option.series[0] : option.series;
    legend['data'] = categories;
    ser['data'] = graph.nodes;
    ser['links'] = graph.links;
    ser['categories'] = categories;
  }
};

function DataLoad (option, name, data) {
  const common = {'bar': 0, 'line': 0};
  let tp = name in common ? 'common' : name;
  if (!(tp in DataLoader)) return;
  DataLoader[tp](option, data);
}

export default Chart;

/*

let graph = {
  nodes: [{name: '成都', category: 0}, {name: '上海', category: 1}, {name: '北京', category: 1},
    {name: '深圳', category: 1}, {name: '广州', category: 1}],
  links: [{source: 0, target: 1}, {source: 1, target: 2}, {source: 2, target: 0}, {source: 0, target: 3},
    {source: 0, target: 4}, {source: 0, target: 5}
  ]
};
let data = [
  {name: '先进制造业', value: [{name: '产业1', value: 20}, {name: '产业2', value: 20}, {name: '产业3', value: 20}]},
  {name: '二大业', value: [{name: '产业5', value: 10}, {name: '产业6', value: 10}, {name: '产业7', value: 10}]},
  {name: '都市现代业', value: [{name: '产业9', value: 10}, {name: '产业10', value: 10}, {name: '产业11', value: 10}]}
];
* */
